<!DOCTYPE >
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>member</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/right.css">
<script type="text/javascript" src="__PUBLIC__/home/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/system.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/admin.js"></script>
<style> 
*{
margin:0;padding:0;	
}

body{
  font-size: 14px;
  line-height: 1.6;	
}

   .overlay { 
	    position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    background: rgba(0,0,0, 0.8);
	    z-index: 100;

    }
    .send{
        width: 65%;
        height: 280px;
        background-color: #FFF;
        margin-left: 25%;
        border-radius: 5px;
        z-index: 101;
        position: fixed; 
        top: 20%;
    }

    .send .title{
      width: 98%;
      border-radius: 5px;
      height: 36px;
      padding-left: 2%;
      padding-top: 7px;
      background: rgba(158, 158, 158, 0.34);
      font-size: 20px;
    }
    .send .close{
      position: absolute;
      top: 2px;
      width: 25px;
      line-height: 25px;
      height: 25px;
      right: 5px;
      text-align: center;
      border-radius: 25px;
      color: #000;
      border: 1px solid rgba(111, 106, 106, 0.57);
      float: right;
    }
    .send .close a{
       color:#000;
    }
    .send .contents{
        position: absolute;
        top: 63px;
        left: 0;
        right:20px;
    }
    .send .contents label{ 
        line-height: 70px;
        height: 70px;
        display: block;
        float: left;
        font-weight: 300;
        padding-right: 5%;
        padding-left: 10%; 
    }
   .send .contents .content_input{
      overflow: hidden;
      width: 63%;
      padding-top: 5px;
      border-radius: 7px;
   }
    
   .send .contents textarea {
        width: 99%;
        height: 104px;
        border-radius: 7px;
   }

    .send .contents textarea :focus{ 
        border-color: #0f0;
    }
   .send .contents .submits{
        width: 100px;
        height: 38px;
        line-height: 38px;
        float: left;
        display: block;
        text-align: center;
        color: #000;
        border-radius: 7px;
        background: rgba(146, 145, 145, 0.62);
        border: 1px solid rgba(163, 169, 163, 0.76);
        margin-left: 46%;
        margin-top: 10px;
   }




.see{
    width: 50%;
    height: 500px;
    top: 5px;
    background-color: #FFF;
    margin-left: 25%;
    border-radius: 5px;
    z-index: 101;
    position: fixed;
}
.see .title{
    width: 98%;
	border-radius: 5px;
	height: 36px;
	padding-left: 2%;
	padding-top: 7px;
	background: rgba(158, 158, 158, 0.34);
	font-size: 20px;
}
.see .close{
	position: absolute;
	top: 2px;
	width: 25px;
	line-height: 25px;
	height: 25px;
	right: 2px;
	text-align: center;
	border-radius: 25px;
	color: #000;
	border: 1px solid rgba(111, 106, 106, 0.57);
	float: right;
    }
.see .lists{
	position:absolute;
	top: 43px;
	left: 0;
	bottom: 0;
	width:100%;
    overflow: auto;
    padding-top: 10px;
}
 
.data{
     overflow: hidden;
    margin-bottom: 30px;

}

.data.left{
	margin-left: 10px;
}

.data .lt .ak{
	padding:10px;
	border-radius: 10px;
}

.data.left .ren{
    width: 40px;
    height: 40px;
    background-size: cover;
	float:left;
}
.data.left .lt{
	display:block;
	float:left;
	margin-left: 10px;
}
.data.left .lt .ak{
   background: #EAEAEC;
}
 
.data.left .lt .sj{
    display: block;
    font-size: 10px;
}


.data.right{
	margin-right: 10px;
}
.data.right .ren{
	width: 40px;
    height: 40px;
    background-size: cover;
	float:right;
}
.data.right .lt{
	display:block;
	float:right;
	margin-right: 10px;
}
.data.right .lt .ak{
	background: rgba(4, 247, 4, 0.13);
}
  
.data.right .lt .sj{
    display: block;
    float:right;
    font-size: 10px;
}
.none{
	display:none;
}
.on{
	display: block;
}
.nones{
	display: block;
    margin-top: 50px;
    text-align: center;
}
</style>
</head>
<body style="overflow: auto;">
	<div class="basic bor">
			<div class="title fl">当前位置：文章管理 > 会员管理</div>
			<div class="basic_r fr"><a href="{:U('Index/setting')}">基本信息</a></div>
	</div>
<!-- 文章分类列表 -->
<div class="catelist">
    <div class="lists listsov">
    <dd>会员列表</dd>
        <ul style="left:0">
        <volist name="cate" id="lis">
            <li><a href="{:U('news/index',array(id=>$lis[id]))}">{$lis.name}</a>
            <dl>

            <volist name="lis.child" id="list">
                <dt><a href="{:U('news/index',array(id=>$list[id]))}">{$list.name}</a></dt>
            </volist>
            </dl>
            </li>
        </volist>

        </ul>
    <div class="button">
        <ol>
            <li class="fl" onclick="next()"><</li>
            <li class="fr" onclick="prev()">></li>
        </ol>

    </div>
    </div>

</div>
<!-- /文章分类列表 -->

<table border="1"  class="table table-hover text-center" id='list'>
  <tr class="trcolor">
    <td>序号</td>
   	<td>会员名称</td>
	<td>头像</td>
    <td>注册时间</td>
    <td colspan="2">操作</td>
 
  </tr>

<!-- ============================================================= -->
<volist name="list" id="li" key ="k">
  <tr>
    <td>{$k}</td>
    <td class="color444 textleft_lover">{$li.name}</td>
    <td class="color12"><img src="{$li.pic}" style = "width:60px;height:60px;border-radius: 25px;" alt=""></td>
    <td class="color12"><?php echo date('Y-m-d',$li['ctime']) ?></td>
    <td><span class="addname"><a href="javascript:;"  data-id= "{$li.id}" class="send_Message">发送消息</a></span></td>
    <td><span class="addname"><a href="javascript:;"  data-id= "{$li.id}" class="see_Message" >查看记录</a></span></td>
  </tr>
</volist>

<!-- ============================================================= -->

</table>
<div class="pages"> 
    <div class="page_s fr">{$page}</div>
</div>


<div class="overlay none" id = "overlay"></div>

<!-- 发送消息-->
<div class = "send none" id = "sendMessageWrap">
<div class ="title">发送消息</div>
<a href="javascript:;" id= "J_close"><div class="close">X</div></a>
	<div class= "contents">
	 <form id="J_form" method = 'post' action="">
	     <input type="hidden" name = "id" id ="J_id" value ="">
	 	 <label for="content">消息内容:</label>
	 	  <div class="content_input">
	 	 <textarea name="content" id="J_content" cols="50" rows="5"></textarea>
	 	 </div>
	 	<a href="javascript:;" id = "J_submit">
	 	 <div class="submits">发送</div>
	 	</a>
	 </form>
	</div>
</div>
<!-- 查看留言  --> 
<div class="see none" id = "seeMessages">
  <div class ="title">消息列表</div>
  <a href="javascript:;" id= "J_close_see"><div class="close">X</div></a> 
  <div class ="lists" id = "J_list"> 
      
  </div>

</div>
<script>
$(function(){

	//发送消息
	$(".send_Message").click(function(){
      var id = $(this).attr('data-id');
      $("#J_id").val(id);
      $("#overlay").removeClass('none');
      $("#sendMessageWrap").slideToggle();
     

	});

	$("#J_close").click(function(){
      $("#sendMessageWrap").fadeOut();
      $("#overlay").addClass('none');
	});
     
      $("#J_submit").click(function(){
      	 var content = $("#J_content").val();
      	 if(content == ''){
      	 	alert("请输入发送内容");
      	 	return false;
      	 }else{
      	 	var dataOpd = $("#J_form").serializeArray();
      	 	var url = "{:U('Member/ajax_Submit')}";
			$.ajax({ 
				type: "POST", 
				dataType: 'json', 
				url: url, 
				data:dataOpd, 
				success: function(res){ 
				if(res.status == 1){ 
					alert(res.info);
					$("#J_form").reset();
					$("#sendMessageWrap").fadeOut();
                    $("#overlay").addClass('none');
				}else{
					alert(res.info);
					}
				}

			});
      	 }
      });

     //查看消息列表
     $(".see_Message").click(function(){
      var id = $(this).attr('data-id');
      var dataOpd = {id:id};
	  var url = "{:U('Member/ajax_getMessage')}";
	  $.ajax({ 
		type: "POST", 
		dataType: 'json', 
		url: url, 
		data:dataOpd, 
		success: function(res){ 
			$("#J_list").html('');
		if(res.status == 1){ 
			var data = res.data;
			var shtml = '';
			for (var i = 0; i < data.length; i++) {
				if(data[i]['type'] == 0){
					shtml = '<div class="data left">'+
							  		'<div class="ren" style = "background-image:url('+data[i].headimg+')"></div>'+
							  		'<div class ="lt">'+
							  		'<div class ="ak" >'+
								  	    '<p class= "name">'+data[i].name+'</p>'+
								  	    '<p class="contents">'+data[i].content+'</p>'+
							  		'</div>'+
								  		'<p class ="sj">'+data[i].add_when+'</p>'+
							  		'</div>'+
							  	'</div>';
				}else{
					shtml = '<div class="data right">'+
							  		'<div class="ren" style = "background-image:url('+data[i].headimg+')"></div>'+
							  		'<div class ="lt">'+
							  		'<div class ="ak">'+
								  	    '<p>'+data[i].name+'</p>'+
								  	    '<p>'+data[i].content+'</p>'+
							  		'</div>'+
								  		'<p class ="sj">'+data[i].add_when+'</p>'+
							  		'</div>'+
							  	'</div>';

				}
				$("#J_list").append(shtml);
			};

		}else{
			 shtml = '<div class="nones">暂无消息列表</div>';
			 $("#J_list").append(shtml);
			}
		}

		});
      
      $("#overlay").removeClass('none');
       $("#seeMessages").fadeIn();
      });       

     $("#J_close_see").click(function(){
      $("#overlay").addClass('none');
      $("#seeMessages").fadeOut();
     });


});
</script>
</body>

</html>